<script setup lang="ts">
</script>

<template>
	<div class="app_container">
		<div class="app_container_left">
			<div class="menu_part">
				<div class="menu_part_title">Vue3基础项目</div>
				<div class="menu_part_item">
					<RouterLink to="/home">Home</RouterLink>
				</div>
				<div class="menu_part_item">
					<RouterLink to="/about">About</RouterLink>
				</div>
			</div>
            <div class="menu_part">
				<div class="menu_part_title">react子项目</div>
				<div class="menu_part_item">
					<RouterLink to="/react/reactHome">Home</RouterLink>
				</div>
				<div class="menu_part_item">
					<RouterLink to="/react/reactAbout">About</RouterLink>
				</div>
			</div>
			<div class="menu_part">
				<div class="menu_part_title">vue2子项目</div>
				<div class="menu_part_item">
					<RouterLink to="/vue2/vue2Home">Home</RouterLink>
				</div>
				<div class="menu_part_item">
					<RouterLink to="/vue2/vue2About">About</RouterLink>
				</div>
			</div>
			<div class="menu_part">
				<div class="menu_part_title">vue3子项目</div>
				<div class="menu_part_item">
					<RouterLink to="/vue3/vue3Home">Home</RouterLink>
				</div>
				<div class="menu_part_item">
					<RouterLink to="/vue3/vue3About">About</RouterLink>
				</div>
			</div>
		</div>
		<div class="app_container_main">
			<!-- router-view渲染当前项目路由 -->
			<RouterView v-show="$route.name"></RouterView>
			<!-- 加载子应用，注意这个id名后面会用到 -->
			<div v-show="!$route.name" id="SubAppContainer"></div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { initGlobalState } from "qiankun";

// 定义一个全局状态池
const actions = initGlobalState({username: "bobo"});

// 注册监听器，将Vue3应用放在状态池了
actions.onGlobalStateChange((state, prev) => {
    console.log("新值：", state);
    console.log("旧值：", prev);
}, true)
</script>

<style scoped lang="scss">
.app_container {
    display: flex;
    width: 100vw;
    height: 100vh;
    .app_container_left {
        width: 200px;
        height: 100%;
        background-color: #ccc;
        .menu_part {
            padding: 10px;
            .menu_part_item {
                padding-left: 30px;
            }
        }
    }
    .app_container_main {
        width: calc(100% - 200px);
        height: 100%;
        background-color: #fff;
    }
    #ContainerSon {
        width: 100%;
        height: 100%;
    }
}
</style>
